<template>

  <div class="bg">
    <div class="login">
      <Row class="loginTop">
        <Col span="8"  class="loginTitle">
          <img src="./../assets/logo.png" alt="logo">
        </Col>
        <Col span="16" class="loginTitle">
          <div class="c_title">一诺云检系统</div>
          <div class="e_title">Backstage logon</div>
        </Col>
      </Row>
      <Row class="marginTop50">
        <Col span="24" class="textCenter"><Input v-model="userName" placeholder="用户名" clearable style="width: 400px;"></Input></Col>
      </Row>
      <Row class="marginTop20">
        <Col span="24" class="textCenter"><Input v-model="userPwd" type="password" placeholder="密码" clearable style="width: 400px" @keyup.enter.native="login"></Input></Col>
      </Row>
      <Row class="marginTop20">
        <Col span="24" class="textCenter"> <Button type="success" long style="width: 400px" @click="login">登录</Button></Input></Col>
      </Row>

    </div>

  </div>
</template>

<script type="text/ecmascript-6">
  import axios from "axios";
export default {
  name: 'Login',
  data :function() {
    return {
      userName:"",
      userPwd:"",
    }
  },
  mounted(){

  },
  methods:{
    login(){
      var _this = this;
      //console.log(this.userName)
      if(this.userName==""||this.userName==null){
        _this.error1("用户名不能为空");
        return false;
      }
      if(this.userPwd==""||this.userPwd==null){
        _this.error1("密码不能为空");
        return false;
      }
      var qs = require('qs');
      var params = qs.stringify({
        username:this.userName,
        password:this.userPwd
      });
      axios.post("/user/login",params).then((response)=>{
        console.log(response.data.data.meuns)
        if(response.data.code=="000000"){
          sessionStorage.setItem("username",_this.userName);
          sessionStorage.setItem("menu",qs.stringify(response.data.data.meuns));
          sessionStorage.setItem("token",response.data.data.token);
          axios.defaults.headers.common['Authorization'] = response.data.data.token;
          this.$router.push({path:"/index"})
        }else{
          console.log(response.data.msg)
            _this.$Notice.error({title:response.data.msg});
        }
      })
    },
    error1(msg){
      this.$Notice.error({
        title:msg,
      });
    },

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .bg{
    height: 100%;
    background: #97d9ed;
    background-image: url("./../assets/bottom.png");
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100%;
  }
  .login{
    width: 500px;
    /*height: 500px;*/
    box-shadow: 0 0 25px #cac6c6;
    background: #fff;
    position: relative;
    top:20%;
    left: 50%;
    margin-left: -250px;
    border-radius: 10px;
    padding-bottom: 40px;
  }
  .loginTop{
    background: #30b3db;
    border-radius: 10px 10px 0 0;
  }
  .c_title{
    font-size: 32px;
    text-align: left;
  }
  .e_title{
    font-size: 22px;
    text-align: left;
  }
  .loginTitle{
    color: #fff;
    padding: 25px 0;
  }
  .textCenter{
    text-align: center;
  }
  .marginTop50{
    margin-top:50px;
  }
  .marginTop20{
    margin-top: 20px;
  }
  .ivu-btn-success{
    background-color:#2fb3da;
    border-color:#2fb3da;

  }
</style>
